<template>
    <div>
        <Breadcrumb style="margin:10px">
            <BreadcrumbItem to="/dashboard">Home</BreadcrumbItem>
            <BreadcrumbItem to='/apis'>API列表</BreadcrumbItem>
            <BreadcrumbItem>{{ breadtitle }}</BreadcrumbItem>
        </Breadcrumb>

        <div class="content">
            <Card>
                <Form ref="formData" :model="formData" :rules="ruleValidate" :label-width="80" style="width: 500px">
                    <FormItem label="所属系统" prop="system">
                        <SystemListSelect :value.sync="formData.system" :disableEdit.sync="disableEdit">
                        </SystemListSelect>
                    </FormItem>
                    <FormItem label="权限标示" prop="permission">
                        <Input v-model="formData.permission" placeholder="example：ota_view"
                            :disabled="disableEdit"></Input>
                    </FormItem>
                    <FormItem label="请求地址" prop="uri">
                        <Input v-model="formData.uri" placeholder="example：/test"></Input>
                    </FormItem>
                    <FormItem label="匹配方法" prop="method">
                        <Select v-model="formData.type" placeholder="匹配方法">
                            <Option v-for="item in formData.mtypes" :value="item.value" :key="item.value">{{ item.label
                            }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="请求方法" prop="method">
                        <Select v-model="formData.method" placeholder="请求方法">
                            <Option v-for="item in formData.methods" :value="item.value" :key="item.value">{{ item.label
                            }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="请求域名" prop="domain">
                        <Input v-model="formData.domain" placeholder="example：api.aproton.tech"></Input>
                    </FormItem>
                    <FormItem label="服务接口地址" prop="serviceUrl">
                        <Input v-model="formData.serviceUrl" placeholder="example：http://api.aproton.tech/test"></Input>
                    </FormItem>
                    <FormItem label="服务接口超时时间" prop="timeout">
                        <Input v-model="formData.timeout" placeholder="单位秒"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formData')" :disabled="subDisable">保存</Button>
                        <Button @click="handleReset('formData')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
            </Card>
        </div>

    </div>
</template>
<script>
import SystemListSelect from '@/components/SystemListSelect';
export default {
    components: {
        SystemListSelect
    },
    data() {
        return {
            breadtitle: 'API添加',
            disableEdit: false,
            subDisable: false,
            id: 0,
            formData: {
                permission: '',
                system: '',
                domain: '',
                uri: '',
                type: '0',
                method: 'ANY',
                timeout: 3,
                serviceUrl: '',
                systemlist: [
                    {
                        value: 'aproton',
                        label: 'aproton',
                    },
                    {
                        value: 'dmin',
                        label: 'permission admin'
                    }
                ],
                mtypes: [
                    {
                        value: '0',
                        label: '完全匹配'
                    },
                    {
                        value: '1',
                        label: '前缀匹配'
                    }
                ],
                methods: [
                    {
                        value: 'ANY',
                        label: 'ANY'
                    },
                    {
                        value: 'POST',
                        label: 'POST'
                    },
                    {
                        value: 'GET',
                        label: 'GET'
                    },
                    {
                        value: 'PUT',
                        label: 'PUT'
                    },
                    {
                        value: 'DELETE',
                        label: 'DELETE'
                    }
                ]
            },
            ruleValidate: {
                permission: [
                    { required: true, message: 'The permission cannot be empty', trigger: 'blur' }
                ],
                system: [
                    { required: true, message: 'Please select the system', trigger: 'change' }
                ],
                domain: [
                    { required: true, message: 'The domain cannot be empty', trigger: 'blur' }
                ],
                uri: [
                    { required: true, message: 'The uri cannot be empty', trigger: 'blur' }
                ],
                method: [
                    { required: true, message: 'The method cannot be empty', trigger: 'change' }
                ],
                timeout: [
                    {
                        type: 'number', message: 'The timeout must be number', trigger: 'blur', transform(value) {
                            return Number(value);
                        }
                    }
                ],
                type: [
                    { required: true, message: 'The match type cannot be empty', trigger: 'change' }
                ],
                serviceUrl: [
                    { required: true, message: 'The service url cannot be empty', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        this.queryData();
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.subDisable = true;
                    if (this.id <= 0) {
                        let params = {
                            permission: this.formData.permission,
                            sys: this.formData.system,
                            domain: this.formData.domain,
                            uri: this.formData.uri,
                            type: this.formData.type,
                            method: this.formData.method,
                            timeout: parseFloat(this.formData.timeout),
                            serviceUrl: this.formData.serviceUrl
                        }
                        this.$axios.post('/admin/api/add', params)
                            .then(response => {
                                console.log(response);
                                if (response.data && response.data.rc == '0') {
                                    this.$Message.success('成功!');
                                } else if (response.data.rc == '-3003') {
                                    this.$Message.error('未登陆!');
                                } else if (response.data.rc == '-4001') {
                                    this.$Message.error('无权访问!');
                                } else if (response.data.rc == '-4') {
                                    this.$Message.error('权限不存在!');
                                } else if (response.data.rc == '-5004') {
                                    this.$Message.error('uri已存在!');
                                } else {
                                    this.$Message.error('失败!');
                                }
                                this.subDisable = false;
                            });


                    } else {
                        let params = {
                            id: parseInt(this.id),
                            domain: this.formData.domain,
                            uri: this.formData.uri,
                            type: this.formData.type,
                            method: this.formData.method,
                            timeout: parseFloat(this.formData.timeout),
                            serviceUrl: this.formData.serviceUrl
                        }
                        this.$axios.post('/admin/api/edit', params)
                            .then(response => {
                                console.log(response);
                                if (response.data && response.data.rc == '0') {
                                    this.$Message.success('成功!');
                                } else {
                                    this.$Message.error('失败!');
                                }
                                this.subDisable = false;
                            });

                    }

                } else {
                    // this.$Message.error('Fail!');
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        },
        queryData() {
            let id = this.$route.params.id;
            this.formData.system = this.$route.query.system;
            this.formData.permission = this.$route.query.p;
            if (id > 0) {
                this.id = id;
                this.breadtitle = 'API编辑';
                this.disableEdit = true;
                this.subDisable = true;

                let params = {
                    id: parseInt(id)
                }
                this.$axios.post('/admin/api/show', params)
                    .then(response => {
                        console.log(response);
                        if (response.data && response.data.rc == '0') {

                            this.formData.permission = response.data.permission;
                            this.formData.system = response.data.system;
                            this.formData.domain = response.data.request_domain;
                            this.formData.uri = response.data.request_uri;
                            this.formData.method = response.data.request_method;
                            this.formData.timeout = response.data.timeout;
                            this.formData.serviceUrl = response.data.service_url;
                            this.formData.type = response.data.type + '';

                        } else {
                            this.$Message.error('错误!');
                        }
                        this.subDisable = false;
                    });

            }
        }
    }
}
</script>

